<template>
 <view class="detail">
	<view class="detail-top">
		  <view class="detail-top-left">
		  			  <view class="detail-top-no">
		  					合约编号：{{receipt.debtnum}}
		  			  </view>
		  			  <view class="detail-top-label">合约总额(元)</view>
		  			  <view class="detail-top-num">
		  					{{receipt.loan_money}}
		  			  </view>
		  </view>
		  <view class="detial-top-right">
		  		<view class="detail-top-btn">{{receipt.repay_status}}</view>
		  </view>
	</view>
	
	<view class="detail-card">
			  <view class="detail-card-top">
					<image src="../../../static/images2/bg-zdt.png" mode="" class="img"></image>
					<view class="detail-card-top__inner">
						<view class="detail-card-top-title">合约详情</view>
						<view class="detail-card-top-no">{{receipt.debtnum}}</view>
					</view>
			  </view>
			  <view class="detail-card-main">
				  <view class="detail-card-line">
					  由于<view class="bold">{{receipt.loanpurpose}}</view>，本人通过<view class="bold">{{receipt.zztype}}</view>方式
					  向<view class="bold">{{receipt.creditor.username}}</view>(身份证号码:<view class="bold">{{receipt.creditor.idcard}}</view>)借取本金
					  人民币<view class="bold">{{num2chinese(receipt.loan_money)}}(￥{{receipt.loan_money}})</view>，
					  总利息金额<view class="bold">壹元(1.00)</view>
					  即借款年利率<view class="bold">{{receipt.year_rate}}%</view>,自<view class="bold">{{receipt.loan_date}}出借</view>，需在
					  <view class="bold">{{receipt.repay_date}}一次性还本付息</view>。
				  </view>
				  <view class="detail-card-line">
					  本借条自「<view class="bold">出借人</view>」向「<view class="bold">借款人</view>」支付借款本金时
					  生效。本借条纠纷由出借人所在地、债务人所在地地方人民法院管辖。
				  </view>
			  </view>
	</view>
	
	<view class="detail-block">
		<view class="detail-block-title">
			借款人信息
		</view>
		<view class="detail-block-main">
			<view class="line-item">
				<view class="line-item-label">姓名</view>
				<view class="line-item-value">{{receipt.obligor.username}}</view>
			</view>
			<view class="line-item">
				<view class="line-item-label">手机号</view>
				<view class="line-item-value">{{receipt.obligor.mobile}}</view>
			</view>
			<view class="line-item">
				<view class="line-item-label">身份证号</view>
				<view class="line-item-value">{{receipt.obligor.idcard}}</view>
			</view>
		</view>
	</view>	 
	
	<view class="detail-block">
		<view class="detail-block-title">
			出借人信息
		</view>
		<view class="detail-block-main">
			<view class="line-item">
				<view class="line-item-label">姓名</view>
				<view class="line-item-value">{{receipt.creditor.username}}</view>
			</view>
			<view class="line-item">
				<view class="line-item-label">手机号</view>
				<view class="line-item-value">{{receipt.creditor.mobile}}</view>
			</view>
			<view class="line-item">
				<view class="line-item-label">身份证号</view>
				<view class="line-item-value">{{receipt.creditor.idcard}}</view>
			</view>
		</view>
	</view>
	
	<view class="detail-block">
		<view class="detail-block-title">付款信息</view>
		<view class="detail-block-main">
			<view class="line-item">
					<view class="line-item-label">近期还款时间</view>
					<view class="line-item-value">{{receipt.repay_date}}</view>
			</view>
			<view class="line-item">
					<view class="line-item-label">借款周期</view>
					<view class="line-item-value">{{receipt.loan_date}}到{{receipt.repay_date}}</view>
			</view>
			<view class="line-item">
					<view class="line-item-label">还款方式</view>
					<view class="line-item-value">{{receipt.repay_type}}</view>
			</view>
			<view class="line-item" v-if=" receipt.repay_type == '灵活分期' || receipt.repay_type == '按月分期'">
					<view class="line-item-label">付款周期</view>
					<view class="line-item-value">
						每期还款{{ receipt.cycle_money }}元，共{{
						    receipt.cycle_num
						  }}期 <view v-if="receipt.repay_type != '灵活分期'">，还款日每月{{ receipt.date }}日</view>
					</view>
			</view>
			<view class="line-item">
				<view class="line-item-label">年化利率</view>
				<view class="line-item-value">{{receipt.year_rate}}%</view>
			</view>
		</view>
	</view>
	
	<view class="detail-block">
		<view class="detail-block-title">其他事项</view>
		<view class="detail-block-main submitter">
			<view  v-if="receipt.remarks">{{receipt.remarks}}</view>
			<view class="remarks" v-else>借款事项备注</view>
		</view>
	</view>
	 
    
	<!--
    <view class="essential">付款信息</view>
      <view class="item">
	 <view >近期还款时间：{{receipt.repay_date}}</view>	
	</view>
    <view class="item" v-if="receipt.repay_type == '一次性还款'">
      <view>付款周期：{{ receipt.loan_date }}到{{ receipt.repay_date }}</view>
    </view>
    <view class="item">
      <view>还款周期：{{ receipt.repay_type }}</view>
    </view>
    <view
      class="item"
      v-if="
        receipt.repay_type == '灵活分期' || receipt.repay_type == '按月分期'
      "
    >
    <view
      >付款周期：每期还款{{ receipt.cycle_money }}元，共{{
        receipt.cycle_num
      }}期 <view v-if="receipt.repay_type != '灵活分期'">，还款日每月{{ receipt.date }}日</view></view
    >
    </view>
    <view class="item">
      <view>年化利率：{{ receipt.year_rate }}%</view>
    </view>
    <view class="essential">其它事项</view>
    <view class="submitter">
      <view v-if="receipt.remarks">{{ receipt.remarks }}</view>
      <view class="remarks" v-else>借款事项备注</view>
    </view>
	-->
	
    <view class="table">
      <u-table>
        <u-tr class="u-tr">
          <u-th class="u-th">销账时间</u-th>
          <u-th class="u-th">销账来源</u-th>
          <u-th class="u-th">销账金额</u-th>
          <u-th class="u-th">剩余金额</u-th>
        </u-tr>
        <u-tr class="u-tr" v-for="(item, index) in repay_record" :key="index">
          <u-td class="u-td">{{ item.pay_date }}</u-td>
          <u-td class="u-td">{{ item.pay_from }}</u-td>
          <u-td class="u-td">{{ item.principal }}</u-td>
          <u-td class="u-td">{{ item.surplus }}</u-td>
        </u-tr>
        <view class="record" v-if="repay_record.length == 0"> 暂无数据 </view>
      </u-table>
    </view>
    <view
      class="bottom"
      v-if="
        receipt.repay_type != '一次性还款' && receipt.repay_status != '已完结'
      "
    >
      <view
        class="button"
        @click="writeOff(item, index)"
        :class="{ active: index == pitch, left: index > 0 }"
        v-for="(item, index) in arr"
        :key="index"
        >{{ item.name }}</view
      >
    </view>
    <view
      class="bottom"
      v-if="
        receipt.repay_type == '一次性还款' && receipt.repay_status != '已完结'
      "
    >
      <view
        class="writeAll"
        @click="writeOff(item, index)"
        :class="{ actives: index == pitch, left: index > 0 }"
        v-for="(item, index) in list"
        :key="index"
        >{{ item.name }}</view
      >
    </view>
    <u-popup
      v-model="dialogVisible.show"
      mode="center"
      border-radius="20"
      width="686rpx"
      height="450rpx"
      @close="close"
    >
      <view class="p-r h-100" v-if="name == '按期销账'">
        <view class="repaid">
			已还{{ schedule.cycle_order - 1 }}期 当前还第{{
            schedule.cycle_order
          }}期
		</view>
        <view class="cycle_money">还款金额{{ schedule.cycle_money }}元</view>
        <view class="repayment_button">
          <view class="cancel public" @click="cancel">取消</view>
          <view class="confirm public" @click="confirm">确认还款</view>
        </view>
      </view>
	  
      <view class="custom p-r" v-else-if="name == '自定义销账'">
        <view class="surplus" v-if="receipt.repay_record.length == 0"
          >剩余金额：{{ receipt.loan_money }}￥</view
        >
        <view class="surplus" v-else
          >剩余金额：{{
            receipt.repay_record[receipt.repay_record.length - 1].surplus
          }}￥</view
        >
        <u-form :model="form" ref="uForm" class="u_form">
          <u-form-item label="销账金额" label-width="144">
            <u-input
              v-model="form.pay_money"
              placeholder="请填写销账金额"
              :border="true"
            />
            <view class="element">元</view>
          </u-form-item>
          <u-form-item label="销账原因" label-width="144">
            <u-input
              v-model="form.pay_remarks"
              placeholder="请填写销账原因"
              maxlength="8"
              :border="true"
            />
            <view class="element"></view>
          </u-form-item>
        </u-form>
        <view class="repayment_button">
          <view class="cancel public" @click="cancel">取消</view>
          <view class="confirm public" @click="identification">确认</view>
        </view>
      </view>
      <view class="p-r h-100" v-if="name == '变更日期'">
        <view v-if="receipt.repay_type == '按月分期'">
          <view class="changeDate">
            <view
              >剩余还款时长：{{ receipt.year }}年{{ receipt.month }}个月
              {{ receipt.surplus_num }}期</view
            >
            <view class="current">当前还款日期：每月{{ receipt.date }}日</view>
            <view class="alteration d-f"
              >变更还款时长
              <view class="dateSelect">
                <u-input
                  class="input"
                  v-model="dateForm.year"
                  :flag="false"
                  type="select"
                  :border="true"
                  placeholder=""
                  @click="yearShow = true"
                />
                
              </view>
              <view class="dateSelect">年</view>
              <view class="dateSelect">
                <u-input
                  class="input"
                  v-model="dateForm.month"
                  :flag="false"
                  type="select"
                  :border="true"
                  placeholder=""
                  @click="monthShow = true"
                />
              
              </view>
              <view class="month">个月{{ dateForm.sup_num }}期</view>
            </view>
            <view class="repayment"
              >变更还款日期：每月
              <view class="dateSelect">
                <u-input
                  class="input"
                  v-model="dateForm.days"
                  :flag="false"
                  type="select"
                  :border="true"
                  placeholder=""
                  @click="dayShow = true"
                />
              </view>
              <view class="day">日</view>
            </view>
          </view>
          <view class="repayment_button">
            <view class="cancel public" @click="cancel">取消</view>
            <view class="confirm public" @click="perMensem">确认</view>
          </view>
        </view>

        <view v-if="receipt.repay_type == '灵活分期'">
          <view class="changeDate">
            <view>剩余期数：{{ receipt.surplus_num }}期</view>
            <view class="current">当前还款周期：间隔{{ receipt.cycle }}日</view>
            <view class="alteration d-f"
              >变更期数
              <view class="dateSelect">
                <u-input
                  class="input"
                  v-model="dateForm.sup_num"
                  :flag="false"
                  type="select"
                  :border="true"
                  placeholder=""
                  @click="periodsShow = true"
                />
              </view>
              <view class="dateSelect">期</view>
            </view>
            <view class="repayment"
              >变更还款周期：间隔
              <view class="dateSelect">
                <u-input
                  class="input"
                  v-model="dateForm.new_cycle"
                  :flag="false"
                  type="select"
                  :border="true"
                  placeholder=""
                  @click="cycleShow = true"
                />
              </view>
              <view class="day">日</view>
            </view>
          </view>
          <view class="repayment_button">
            <view class="cancel public" @click="cancel">取消</view>
            <view class="confirm public" @click="query">确认</view>
          </view>
        </view>
        <view v-if="receipt.repay_type == '一次性还款'">
          <view class="changeDate">
            <view>当前还款日期：{{ receipt.repay_date }}</view>
            <view class="repayment">变更还款日期：</view>
              <!-- {{dateForm.next_pay_date}} -->
              <view class="repayment" @click="repayment">
                <view class="input_date">{{ dateForm.year }}</view>
                <view class="day">年 </view>
                <view class="input_date day">{{ dateForm.month }}</view>
                <view class="day">月</view>
                <view class="input_date day">{{ dateForm.days }}</view>
                <view class="day">日</view>
              </view>
          </view>
          <view class="repayment_button">
            <view class="cancel public" @click="cancel">取消</view>
            <view class="confirm public" @click="determination">确认</view>
          </view>
        </view>
      </view>
    </u-popup>

    <u-popup
      v-model="dialogVisible.whole"
      mode="center"
      border-radius="20"
      width="686rpx"
      height="318rpx"
    >
      <view class="complete">
        <view class="tips"
          >是否确认“{{ receipt.obligor.username }}”{{
            receipt.surplus_money
          }}元的欠款全部销账？</view
        >
        <view class="repayment_button">
          <view class="cancel public" @click="remove">取消</view>
          <view class="confirm public" @click="acknowledge">确认</view>
        </view>
      </view>
    </u-popup>

    <u-toast ref="uToast" />
    <u-select
      v-model="periodsShow"
      label-name="value"
      :list="flexible[0]"
      @confirm="periodsConfirm"
    ></u-select>
    <u-select
      v-model="cycleShow"
      label-name="value"
      :list="flexible[2]"
      @confirm="cycleConfirm"
    ></u-select>
    <u-select
                  v-model="yearShow"
                  label-name="value"
                  :list="mensem[0]"
                  @confirm="yearConfirm"
                ></u-select>
                  <u-select
                  v-model="monthShow"
                  label-name="value"
                  :list="mensem[2]"
                  @confirm="monthConfirm"
                ></u-select>
                <u-select
                  v-model="dayShow"
                  label-name="value"
                  :list="repaymentDate"
                  @confirm="daysConfirm"
                ></u-select>
                    <gpp-date-picker
                    ref="picker"
              @onConfirm="onConfirm"
              :startDate="startDate"
              :endDate="endDate"
              :defaultValue="startDate"
              title="还款日期"
            >
            </gpp-date-picker>
			
			<jpPwd ref="jpPwds" tite="身份验证" contents="请输入交易密码,以验证身份" :flag="flag"  @completed="completed"  :cancelType="cancelType"></jpPwd>
  </view>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import gppDatePicker from "@/components/gpp-datePicker/gpp-datePicker.vue";
import toast from "../../../utils/toast.js";
import date from '@/utils/date'
import jpPwd from '@/components/jp-pwd/jp-pwd.vue'

export default {
  data() {
    return {
      yearShow: false,
      monthShow: false,
      dayShow: false,
      periodsShow: false,
      cycleShow: false,
      value: "",
      id: "",
      name: "按期销账",
      pitch: -1,
      arr: [
        {
          name: "按期销账",
        },
        {
          name: "自定义销账",
        },
        {
          name: "全部销账",
        },
        {
          name: "变更日期",
        },
      ],
      list: [
        {
          name: "自定义销账",
        },
        {
          name: "全部销账",
        },
        {
          name: "变更日期",
        },
      ],
	  cancelType: true,
	  flag: false
    };
  },
  components: { gppDatePicker, jpPwd },
  methods: {
	  num2chinese: date.num2chinese,
    ...mapMutations({
      changeShow: "MAY_DEBT/CHANGE_SHOW", //改变show的状态
      changeWhole: "MAY_DEBT/CHANGE_WHOLE", //改变whole的状态
      getYear: "MAY_DEBT/GET_YEAR", //获取年
      getMonth: "MAY_DEBT/GET_MONTH", //获取月
      getDays: "MAY_DEBT/GET_DAYS", //获取日
      getPeriods: "MAY_DEBT/GET_PERIODS", //获取变更期数
      getCycle: "MAY_DEBT/GET_CYCLE", //获取间隔天数
      changeStartTime: "MAY_DEBT/CHANGE_STATRT_TIME", //初始化开始时间跟结束时间
      alterationDate: "MAY_DEBT/ALTERATION_DATE", //一次性还款变更时间
      changeVisible: "MAY_DEBT/CHANGE_VISBLE", //初始flase
    }),
    ...mapActions({
      getNoteDetails: "MAY_DEBT/GET_NOTE_DETAILS", //获取合约详情
      getSchedule: "MAY_DEBT/GET_SCHEDULE", //按期销账-查询当期还款数据
      writeOffschedule: "MAY_DEBT/WRITEOFF_SCHEDULE", //按期销账
      customRepay: "MAY_DEBT/CUSTOM_REPAY", //自定义销账
      writeOffAll: "MAY_DEBT/WRITE_OFF_ALL", //全部销账
      revDate: "MAY_DEBT/REVDATE", //更改日期
	  confirmPayPwd: 'MAY_DEBT/CONFIRM_PAY_PWS', // 验证支付密码
    }),
    writeOff(item, index) {
      this.pitch = index;
      if (item.name == "按期销账") {
        this.getSchedule(this.id);
      } else if (item.name == "自定义销账") {
        this.changeShow(true);
      } else if (item.name == "全部销账") {
        this.changeWhole(true);
      } else {
        this.changeStartTime();
        this.changeShow(true);
      }
      this.name = item.name;
    },
	// 按期销账
    confirm() {
		this.actionType = 0
		this.verification()
      // this.writeOffschedule({ scheduleId: this.schedule.id, id: this.id });
    },
    cancel() {
      this.changeShow(false);
    },
    remove() {
      this.changeWhole(false);
    },
    //全部销账
    acknowledge() {
	 this.actionType = 2
	 this.verification()
      // this.writeOffAll(this.id);
    },
	// 自定义销账
    identification() {
      if (this.form.pay_money == "") {
        this.$refs.uToast.show({
          title: "请填写销账金额",
        });
      } else if (this.form.pay_remarks == "") {
        this.$refs.uToast.show({
          title: "请填写销账原因",
        });
      } else {
		  this.actionType = 1
		  this.verification()
        // this.customRepay(this.id);
      }
    },
    repayment(){
     this.$refs.picker.pipkerShowFlag=true
    },
    //获取年份
    yearConfirm(e) {
      this.getYear(e[0].value);
    },
    //获取月份
    monthConfirm(e) {
      this.getMonth(e[0].value);
    },
    //获取日期
    daysConfirm(e) {
      this.getDays(e[0].value);
    },
    //获取变更期数
    periodsConfirm(e) {
      this.getPeriods(e[0].value);
    },
    //获取间隔天数
    cycleConfirm(e) {
      this.getCycle(e[0].value);
    },
    //灵活分期保存-变更日期
    query() {
      if (this.dateForm.sup_num == "") {
        this.$refs.uToast.show({
          title: "请选择变更期数",
        });
      } else if (this.form.days == "") {
        this.$refs.uToast.show({
          title: "请选择变更还款周期",
        });
      } else {
		this.actionType = 3
		this.verification()
        // this.revDate();
      }
    },
    //按月分期
    perMensem() {
      if (this.dateForm.sup_num == 0) {
        this.$refs.uToast.show({
          title: "请选择变更还款时长",
        });
      } else if (this.form.new_cycle == "") {
        this.$refs.uToast.show({
          title: "请选择变更还款时长",
        });
      } else {
		  this.actionType = 3
		  this.verification()
        // this.revDate();
      }
    },
    onConfirm(e) {
      this.alterationDate(e.dateValue);
    },
    //变更一次性还款提交
    determination() {
      if (this.dateForm.next_pay_date == "") {
        this.$refs.uToast.show({
          title: "请选择变更日期",
        });
        return;
      }
	  this.actionType = 3
	  this.verification()
      // this.revDate();
    },
    close() {
      this.changeShow(false);
      this.changeWhole(false);
    },
	//输入交易密码验证合约
	verification() {
		this.$refs.jpPwds.toOpen()
		this.flag=false
	},
	completed(val) {
		this.confirmPayPwd({pay_pwd: val}).then(() => {
			if(this.actionType === 0) { // 按期
				this.writeOffschedule({ scheduleId: this.schedule.id, id: this.id });
			} else if(this.actionType === 1) { // 自定义销账
				this.customRepay(this.id)
			} else if(this.actionType === 2) { // 全部销账
				this.writeOffAll(this.id)
			} else if(this.actionType === 3) { // 变更日期
				this.revDate()
			}
		})
	}
  },
  mounted() {},
  onShow() {
    this.changeVisible();
  },
  watch: {},
  onLoad(options) {
    this.id = options.id;
    this.getNoteDetails(options.id);
  },
  computed: {
    ...mapState({
      receipt: (state) => state.MAY_DEBT.receipt,
      repay_record: (state) => state.MAY_DEBT.repay_record,
      schedule: (state) => state.MAY_DEBT.schedule,
      dialogVisible: (state) => state.MAY_DEBT.dialogVisible,
      form: (state) => state.MAY_DEBT.form,
      mensem: (state) => state.MAY_DEBT.mensem,
      flexible: (state) => state.MAY_DEBT.flexible,
      repaymentDate: (state) => state.MAY_DEBT.repaymentDate,
      dateForm: (state) => state.MAY_DEBT.dateForm,
      startDate: (state) => state.MAY_DEBT.startDate,
      endDate: (state) => state.MAY_DEBT.endDate,
    }),
  },
};
</script>

<style scoped lang='scss'>
@import "@/common/debtDetails.scss";
.input {
  width: 108rpx;
  height: 54rpx;
}
.input_date {
  width: 120rpx;
  height: 54rpx;
  border: 1px solid #eeeeee;
  border-radius: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.day {
  margin-left: 14rpx;
}
.month {
  margin-left: 22rpx;
}
.dateSelect {
  margin-left: 8rpx;
}
.repayment {
  margin-top: 34rpx;
  display: flex;
}

.alteration {
  margin-top: 28rpx;
}

.current {
  margin-top: 24rpx;
}

.changeDate {
  padding: 52rpx 32rpx;
  color: #0a0b16;
  font-size: 32rpx;
}

.tips {
  color: #0a0b16;
  font-size: 32rpx;
  padding: 0rpx 32rpx;
}

.complete {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  padding-top: 84rpx;
}

.u_form {
  margin-top: 46rpx;
}

.element {
  color: #0a0b16;
  font-size: 32rpx;
  width: 40rpx;
  margin-left: 36rpx;
}

.custom {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.surplus {
  margin-top: 36rpx;
  color: #0a0b16;
  font-size: 40rpx;
}

.table {
  margin-top: 38rpx;
  padding: 0rpx ;
  padding-bottom: 120rpx;
}

.bottom {
  left: 0;
  width: 100%;
  height: 98rpx;
  background: #ffffff;
  padding: 0rpx 32rpx;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  box-shadow: 0px -1px 13px 0px rgba(0,0,0, .2)
}

.button {
  width: 164rpx;
  height: 72rpx;
  background: #4A8FF9;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100rpx;
  color: #ffffff;
}

.writeAll {
  width: 222rpx;
  height: 72rpx;
  background: #4A8FF9;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100rpx;
  color: #ffffff;
}

.actives {
  background: #ffffff;
  border: 2rpx solid #4A8FF9;
  color: #4A8FF9;
}

.left {
  margin-left: 10rpx;
}

.repaid {
  font-size: 32rpx;
  color: #0a0b16;
  padding-top: 32rpx;
  margin-left: 32rpx;
}

.cycle_money {
  height: 146rpx;
  font-size: 40rpx;
  color: #0a0b16;
  margin-left: 178rpx;
  margin-top: 122rpx;
}

.repayment_button {
  width: 100%;
  border-top: 2rpx solid #eeeeee;
  height: 106rpx;
  display: flex;
  position: absolute;
  bottom: 0;
}

.cancel {
  border-right: 2rpx solid #eeeeee;
  color: #0a0b16;
}

.public {
  width: 342rpx;
  height: 106rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
}

.confirm {
  color: #4A8FF9;
}

.u-td {
  width: 180rpx;
  height: 100rpx;
}
</style>

<style>
page {
  background: #fafafa;
}
</style>
